<template>
  <div class="resources-page">
    <app-header />
    
    <div class="page-content">
      <h1>软件资源</h1>

      <!-- PC端资源列表 -->
      <template v-if="!isMobileDevice">
        <div class="resource-container">
          <div class="categories">
            <el-menu
              :default-active="currentCategory"
              @select="handleCategorySelect"
            >
              <el-menu-item index="">全部分类</el-menu-item>
              <el-menu-item
                v-for="category in categories"
                :key="category.id"
                :index="category.name"
              >
                {{ category.name }}
              </el-menu-item>
            </el-menu>
          </div>

          <div class="resource-list">
            <el-card
              v-for="resource in resources"
              :key="resource.id"
              class="resource-card"
            >
              <h3>{{ resource.title }}</h3>
              <p class="description">{{ resource.description }}</p>
              <div class="meta">
                <el-tag size="small">{{ resource.category }}</el-tag>
                <span class="version">v{{ resource.version }}</span>
              </div>
              <div class="footer">
                <span class="downloads">下载次数：{{ resource.downloads }}</span>
                <el-button type="primary" size="small">
                  下载
                </el-button>
              </div>
            </el-card>
          </div>
        </div>

        <el-pagination
          v-if="total > 0"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </template>

      <!-- 移动端资源列表 -->
      <template v-else>
        <van-tabs v-model:active="activeTab" sticky>
          <van-tab title="全部">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <van-card
                  v-for="resource in resources"
                  :key="resource.id"
                  :title="resource.title"
                  :desc="resource.description"
                  :tags="[resource.category]"
                >
                  <template #footer>
                    <van-button size="small" type="primary">下载</van-button>
                  </template>
                </van-card>
              </van-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab
            v-for="category in categories"
            :key="category.id"
            :title="category.name"
          />
        </van-tabs>
      </template>
    </div>

    <app-footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useResourceStore } from '@/stores/resource'
import { isMobile } from '@/utils/device'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'

const resourceStore = useResourceStore()
const isMobileDevice = ref(isMobile())

const currentPage = ref(1)
const pageSize = ref(12)
const currentCategory = ref('')
const activeTab = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const resources = ref([])
const categories = ref([])
const total = ref(0)

onMounted(async () => {
  await Promise.all([
    loadResources(),
    loadCategories()
  ])
})

async function loadResources() {
  await resourceStore.fetchResources(currentPage.value, pageSize.value, currentCategory.value)
  resources.value = resourceStore.resources
  total.value = resourceStore.total
}

async function loadCategories() {
  await resourceStore.fetchCategories()
  categories.value = resourceStore.categories
}

function handleCategorySelect(category) {
  currentCategory.value = category
  currentPage.value = 1
  loadResources()
}

function handlePageChange(page) {
  currentPage.value = page
  loadResources()
}

// 移动端下拉刷新
async function onRefresh() {
  currentPage.value = 1
  finished.value = false
  await loadResources()
  refreshing.value = false
}

// 移动端加载更多
async function onLoad() {
  if (resources.value.length >= total.value) {
    finished.value = true
    return
  }
  currentPage.value += 1
  await loadResources()
  loading.value = false
}
</script>

<style lang="scss" scoped>
.resources-page {
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .page-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    h1 {
      margin-bottom: 30px;
      text-align: center;
    }
  }
}

.resource-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  margin-bottom: 30px;

  .categories {
    position: sticky;
    top: 80px;
    height: fit-content;
  }

  .resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

.resource-card {
  height: 100%;
  display: flex;
  flex-direction: column;

  h3 {
    margin: 0 0 10px;
    font-size: 1.2em;
  }

  .description {
    color: #666;
    margin-bottom: 15px;
    flex: 1;
  }

  .meta {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;

    .version {
      color: #999;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .downloads {
      color: #999;
      font-size: 0.9em;
    }
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .resources-page {
    .page-content {
      padding: 15px;
    }
  }

  .van-card {
    margin-bottom: 10px;
  }
}
</style> 